<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0" />
    <link charset="utf-8" href="css/markdown-preview.css" rel="stylesheet">
    <style>
        DOWN_CSS
    </style>
    <style>
        #MathJax_Message+* {
            margin-top: 0 !important;
        }
    </style>
</head>

<body>

    DOWN_HTML

    <script charset="utf-8" src="js/highlight.min.js" type="text/javascript"></script>
    <script>hljs.initHighlightingOnLoad();</script>

    <script>
        function getSelectionAndSendMessage() {
            var txt = document.getSelection().toString();
            window.webkit.messageHandlers.newSelectionDetected.postMessage(txt);
        }
        document.onmouseup = getSelectionAndSendMessage;
        document.onkeyup = getSelectionAndSendMessage;
        document.oncontextmenu = getSelectionAndSendMessage;

        var darkModeStylesNodeID = "darkModeStyles";

        function addStyleString(str, nodeID) {
            var node = document.createElement('style');
            node.id = nodeID;
            node.innerHTML = str;

            document.getElementsByTagName('head')[0].appendChild(node);
        }

        function switchToDarkMode(background) {
            var darkModeStyleElement = document.getElementById(darkModeStylesNodeID);
            if (darkModeStyleElement == null) {
                var darkModeStyles = "* { color: white; } body { background: " + background + "; } code { background: #454545; } .hljs { background: #454545 } a { color: #98e7a7 } table { border-color: red } table td, table th { background: #908D8D; border-color: black; } table td, table th, table td *, table th * { color: black } input[type='checkbox'] { border: 1px solid white; }";
                addStyleString(darkModeStyles, darkModeStylesNodeID);
            }
        }

        function switchToLightMode() {
            var darkModeStyleElement = document.getElementById(darkModeStylesNodeID);
            if (darkModeStyleElement != null) {
                darkModeStyleElement.parentElement.removeChild(darkModeStyleElement);
            }
        }

        if ('CUSTOM_CSS' == 'darkmode') {
            let background = '#2a2b2e';

            if ('IS_IOS' == 'true') {
                background = '#000000';
            }

            switchToDarkMode(background);
        }
    </script>
    <script>
        var preList = document.getElementsByTagName("code"),
            length = preList.length,
            i = 0;

        for (i; i < length; i++) {
            if (preList[i].classList.contains('language-mermaid')) {
                continue;
            }

            preList[i].addEventListener("mouseenter", function(event) {
                window.webkit.messageHandlers.mouse.postMessage('enter')
            });

            preList[i].addEventListener("mouseleave", function(event) {
                window.webkit.messageHandlers.mouse.postMessage('leave')
            });

            preList[i].addEventListener("click", function(event) {
                let target = event.target
                while (target && target.nodeName !== "CODE") {
                    target = target.parentElement
                }

                window.webkit.messageHandlers.clipboard.postMessage(target.innerText);

                target.style.background = "#9c9c9c"
                setTimeout(function() {
                    if (null == document.getElementById("darkModeStyles")) {
                        target.style.background = "#f5f5f5";
                    } else {
                        target.style.background = "#454545";
                    }
                }, 150)
            });
        }

        var aList = document.getElementsByTagName("a"),
            aLength = aList.length,
            j = 0;

        for (j; j < aLength; j++) {
            aList[j].addEventListener("mouseenter", function(event) {
                window.webkit.messageHandlers.mouse.postMessage('enter')
            });

            aList[j].addEventListener("mouseleave", function(event) {
                window.webkit.messageHandlers.mouse.postMessage('leave')
            });
        }
    </script>

    <script>
        var preList = document.getElementsByTagName("input"),
            length = preList.length,
            i = 0;

        for (i; i < length; i++) {
            preList[i].disabled = true;

            if (preList[i].parentNode.tagName == "P" && preList[i].parentNode.parentNode.tagName == "LI") {
                preList[i].parentNode.parentNode.parentNode.classList.add('cb')
                continue;
            }

            if (preList[i].parentNode.tagName != "LI") {
                continue;
            }

            preList[i].parentNode.parentNode.classList.add('cb')
        }
    </script>



    <script src="js/mermaid.min.js"></script>
    <script>
        var config = {
            startOnLoad: true,
            theme: 'forest',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true
            }
        };

        mermaid.initialize(config);
        window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
    </script>

    <script>
        var addCheckboxEvent = function(element) {
            if (element.parentNode.nodeName == 'LI') {
                element.parentNode.classList.remove('strike');
            }

            let id = element.dataset.checkbox;
            window.webkit.messageHandlers.checkbox.postMessage(id);

            let input = document.createElement("input");
            input.type = "checkbox";
            input.dataset.checkbox = id;

            if (!element.hasAttribute('checked')) {
                input.defaultChecked = true;

                if (element.parentNode.nodeName == 'LI') {
                    element.parentNode.classList.add('strike');
                }
            }

            element.parentNode.replaceChild(input, element);

            input.addEventListener("click", function(event) {
                addCheckboxEvent(input);
            });
        };

        var inputs = document.querySelectorAll('input[type=checkbox]'),
            length = inputs.length,
            i = 0;

        for (i; i < length; i++) {
            if (inputs[i].parentNode.nodeName == "LI" && inputs[i].hasAttribute('checked')) {
                inputs[i].parentNode.classList.add("strike");
            }

            inputs[i].disabled = false
            inputs[i].dataset.checkbox = i;

            inputs[i].addEventListener("click", function(event) {
                let element = event.target;
                addCheckboxEvent(element);
            });
        }

    </script>

    MATH_JAX_JS
</body>

</html>
